<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单的隐藏与显示</title>
    <script>
        function fn(a,b){
            // 取出当前触发事件的列表
            let aChild = document.getElementById(a);
            // 取出另外一个列表
            let bChild = document.getElementById(b);

            // 此时事件有两种情况
            // 1.如果当前触发事件的列表处于隐藏状态
            if(aChild.style.display == "none"){
                // 则另一个列表可能是显示,也可能是隐藏
                // 我们需要将当前列表显示出来
                aChild.style.display = "block";
                // 将另一个列表隐藏起来
                bChild.style.display = "none";
                return;
            }

            // 2.如果当前触发事件的列表处于显示状态
            // 则另一个列表一定是隐藏状态
            // 此时只需要将当前列表隐藏即可
            aChild.style.display = "none";

        }
    </script>
</head>
<body>
<!--
    菜单的隐藏与显示
        下面的多个列表同一时间最多只有一个列表是显示状态
        可以全部隐藏
        要求使用一个事件进行实现,可以考虑传递参数
-->
<h2 onclick="fn('u1','u2')">家用电器</h2>
<ul id="u1" style="display: none;">
    <li>电视</li>
    <li>空调</li>
    <li>冰箱</li>
</ul>
<h2 onclick="fn('u2','u1')">电子产品</h2>
<ul id="u2" style="display: none;">
    <li>手机</li>
    <li>pad</li>
    <li>电子表</li>
</ul>
</body>
</html>